<template>
  <div class="yty-history">
    <h3 class="h3">公司资质</h3>
    <a-form-model :model="form" layout="inline" :colon="false" style="margin: 10px 0" id="tag_list">
          <a-form-model-item label="关键词">
            <a-input v-model="form.keyword" placeholder="请输入标题名称" allowClear/>
          </a-form-model-item>
          <a-form-model-item label="内容分类">
            <a-input v-model="form.contentType" placeholder="请输入内容分类" allowClear/>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="onSubmit" type="primary">查询</a-button>
          </a-form-model-item>
    </a-form-model>
    <!-- 批量操作 -->

    <div class="tableclass">
      <my-table :columns="columns" :data-source="list" :pagination="false" :rowKey="(record) => record.id" style="min-height: 94%">
        <template slot="name" slot-scope="text, record">
          <span class="hidden1" :title="record.userName">{{record.userName}}</span>
        </template>
        <template slot="content" slot-scope="text, record">
          <div class="contentSpan" v-html="record.content"></div>
        </template>
        <template slot="operation" slot-scope="text, data">
          <div class="editable-row-operations">
            <span>
              <a class="detail-btn" @click="showModal(data)">查看详情</a>
            </span>
            <!--<span>
              <a-button class="edit-btn" @click="editData(data)">编辑</a-button>
            </span>
            <span>
              <a-button class="del-btn" @click="delSelect(data,index)">删除</a-button>
            </span>-->
          </div>
        </template>
      </my-table>
      <div class="content-bottom clearfix">
        <a-pagination
            v-model="form.current"
            :total="total"
            :show-total="(total) => `共 ${total}条记录`"
            :defaultPageSize="form.size"
            :item-render="itemRender"
            @change="pagechangeFn"
        />
      </div>
    </div>


    <!-- //详情弹出框 -->
    <a-modal
        :title="detail.title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
        centered
        width="50%"
    >
      <div class="page-body">
        <a-form layout="horizontal" :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 12 }">
          <a-row type="flex">
            <!--<a-col :span="9" :offset="3" width="100%">
              <a-form-item class="form-item" label="内容分类" :colon="false">{{detail.contentType}}</a-form-item>
            </a-col>-->
            <a-col :span="6" :offset="2">
              <a-form-item class="form-item" label="创建人">{{detail.nickname }}</a-form-item>
            </a-col>
            <a-col :span="6" :offset="6">
              <a-form-item class="form-item" label="创建时间">{{ detail.creatTime }}</a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <!--<a-col :span="8" :offset="2">
              <a-form-item
                class="form-item"
                label="资料类型"
                :colon="false"
              >{{detail.informationType}}</a-form-item>
            </a-col>-->
          </a-row>
          <a-row>
            <a-col>
              <div v-html="detail.content" class="container"></div>
            </a-col>
          </a-row>

          <div class="all">
            <p style="flex: none">下载附件</p>

            <div class="downFiles" v-for="(item, index) in fileSearch" :key="index" @mouseover="aa(index)" :class="isborder == index ? 'isborder' : ''">
              <p class="hidden1" :title="item.name">{{ item.name }}</p>
              <a-icon type="arrow-down" @click="down(item)" />
            </div>
          </div>
        </a-form>
      </div>
    </a-modal>
    <!-- 新增弹出框 -->
    <a-modal
        :title="title"
        :visible="visibleA"
        :confirm-loading="confirmLoadingA"
        @cancel="handleCancel"
        closable
        width="80%"
        centered
        destroyOnClose
        :maskClosable="false"
    >
      <a-form-model
          :form="addForm"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 17 }"
      >
        <a-form-model-item label="内容分类" :wrapper-col="{ span: 8 }">
          <a-input
              v-model="addForm.contentType"
              placeholder="请填写内容分类"
          />
        </a-form-model-item>
        <a-form-model-item label="资料标题" :wrapper-col="{ span: 8 }">
          <a-input v-model="addForm.title" placeholder="请填写资料标题" />
        </a-form-model-item>
        <a-form-model-item label="创建时间">
          <a-date-picker
              :defaultValue="addForm.creatTime"
              placeholder="创建时间"
              @change="onChangeDate"
              :disabled-date="disabledDate"
          />
        </a-form-model-item>
        <a-form-model-item label="资料内容" :wrapper-col="{ span: 19 }">
          <!--<a-textarea v-model="addForm.content" placeholder="请填写资料内容" :rows="4" />-->
          <template>
            <div>
              <div class="edit_container">
                <a-upload
                    :file-list="lists"
                    action="http://10.10.10.42:8601/api/file/uploadFiles"
                    :data="a"
                    multiple
                    @change="upChange"
                >
                  <a-button class="upload">
                    <a-icon type="upload" />上传
                  </a-button>
                </a-upload>
                <quill-editor
                    class="ql-editor"
                    v-model="addForm.content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @foucus="onEditorBlur($event)"
                    @change="onEditorChange($event)"
                ></quill-editor>
              </div>
            </div>
          </template>
        </a-form-model-item>

        <!-- <a-form-model-item label="资料类型">
          <a-select v-model="addForm.informationType" placeholder="选择资料类型">
            <a-select-option value="1">1</a-select-option>
            <a-select-option value="1">1</a-select-option>
            <a-select-option value="1">1</a-select-option>
          </a-select>
        </a-form-model-item>-->
      </a-form-model>
      <template slot="footer">
        <a-button class="btn" type="primary" @click="confirmSend"
        >确认</a-button
        >
        <a-button class="btn" type="info" @click="cancelBtn">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
//导入样式
import "quill/dist/quill.snow.css";
const toolbarOptions = [
  //工具栏配置
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  ["blockquote", "code-block"], //引用，代码块

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: "ordered" }, { list: "bullet" }], //列表
  [{ script: "sub" }, { script: "super" }], // 上下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文本方向

  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  //[{ font: [] }], //字体
  [{ align: [] }], //对齐方式

  ["clean"], //清除字体样式
  ["image"], //上传图片
];

export default {
  name: "yty-history",
  components: { quillEditor},
  data() {
    return {
      lists: [],
      flag: false,
      total: 0,
      moment,
      title: "上传资料",
      form: {
        current: 1,
        size: 10,
        keyword: "",
        contentType: "",
        informationType: "1",
      },
      //表格数据
      list: [],

      //详情数据
      detail: [],
      //新增数据
      addForm: {
        contentType: null,
        title: "",
        content: "",
        creatTime: moment(),
      },
      newData: {
        userId: "zhangsan",
        contentType: "",
        content: "",
        hit: 0,
        creatTime: null,
        title: "",
        informationType: "",
      },

      selectedRowKeys: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          width: "80px",
          customRender: (text, record, index) =>
            `${(this.form.current - 1) * this.form.size + index + 1}`,
        },

        {
          title: "上传用户",
          dataIndex: "nickname",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "nickname" },
        },
        {
          title: "内容分类",
          dataIndex: "contentType",
          align: "center",
          width: "13%",
          scopedSlots: { customRender: "classification" },
        },
        {
          title: "资料类型",
          dataIndex: "informationType",
          align: "center",
          width: "10%",
        },
        {
          title: "标题",
          dataIndex: "title",
          ellipsis: true,
          align: "center",
          width: "37%",
        },
        {
          title: "阅读量",
          dataIndex: "hit",
          align: "center",
          scopedSlots: { customRender: "quantity" },
          width: "10%",
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" },
          width: "10%",
        },
      ],
      current: 1,
      //详情弹出框
      visible: false,
      visibleA: false,
      confirmLoading: false,
      confirmLoadingA: false,
      //查询数据

      //富文本
      toolbarTips: [
        { Choice: ".ql-bold", title: "加粗" },
        { Choice: ".ql-italic", title: "倾斜" },
        { Choice: ".ql-underline", title: "下划线" },
        { Choice: ".ql-strike", title: "删除线" },
        { Choice: ".ql-blockquote", title: "块引用" },
        { Choice: ".ql-code-block", title: "插入代码段" },

        { Choice: '.ql-header[value="1"]', title: "h1" },
        { Choice: '.ql-header[value="2"]', title: "h2" },
        { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
        { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
        { Choice: '.ql-script[value="sub"]', title: "下标" },
        { Choice: '.ql-script[value="super"]', title: "上标" },
        { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
        { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
        { Choice: '.ql-direction[value="rtl"]', title: "文本方向" },
        {
          Choice: '.ql-size .ql-picker-item[data-value="small"]',
          title: "小号",
        },
        {
          Choice: '.ql-size .ql-picker-item[data-value="large"]',
          title: "大号",
        },
        {
          Choice: '.ql-size .ql-picker-item[data-value="huge"]',
          title: "超大号",
        },
        { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
        { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
        {
          Choice: '.ql-header .ql-picker-item[data-value="1"]',
          title: "标题一",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="2"]',
          title: "标题二",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="3"]',
          title: "标题三",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="4"]',
          title: "标题四",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="5"]',
          title: "标题五",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="6"]',
          title: "标题六",
        },
        { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
        { Choice: ".ql-color", title: "字体颜色" },
        { Choice: ".ql-background", title: "背景颜色" },
        { Choice: ".ql-align", title: "对齐方式" },
        { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
        {
          Choice: '.ql-align .ql-picker-item[data-value="center"]',
          title: "居中对齐",
        },
        {
          Choice: '.ql-align .ql-picker-item[data-value="right"]',
          title: "居右对齐",
        },
        {
          Choice: '.ql-align .ql-picker-item[data-value="justify"]',
          title: "两端对齐",
        },
        { Choice: ".ql-clean", title: "清除格式" },
        { Choice: ".ql-image", title: "图像" },
      ],
      content: "",
      editorOption: {
        placeholder: "请输入....",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  //调用antd图片上传
                  document.querySelector(".ant-upload .ant-btn").click();
                } else {
                  this.quill.format("imgae", false); //禁用富文本内部上传图片
                }
              },
            },
          },
        },
      },
      fileList: [],
      uploading: false,
      link: "", //下载链接
      fileSearch: [], //查看下载
      isborder: "",
    };
  },
  methods: {
    a(e) {
      console.log(e);
      return { multipartFileList: e.name };
    },
    getCurrentData() {
      return new Date().toLocaleDateString();
    },
    //删除操作
    delSelect(data) {
      let _that = this;
      this.$confirm({
        title: "是否确认删除",
        onOk() {
          let id = data.id;
          _that.$api.delete_Data(id).then((res) => {
            // console.log(res.data.data);
            if (res.status == 200) {
              _that.$message.info("删除成功");
              _that.onSubmit();
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    //批量删除
    // batchDelete() {
    //   this.id;
    //   this.$api.delete_Data(id).then((res) => {
    //     console.log(res.data.data);
    //     if (res.status == 200) {
    //       this.$message.info("删除成功");
    //       this.list = res.data.data;
    //       this.onSubmit();
    //     }
    //   });
    // },
    //查询接口
    onSubmit() {
      this.$api.inquire_Data(this.form).then((res) => {
        if (res.status == 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          //var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
          this.list.forEach((v) => {
            // console.log(moment(parseInt(v.creatTime)));
            if (v.creatTime != null) {
              v.creatTime = moment(v.creatTime).format("YYYY/MM/DD ");
            } else {
              v.creatTime = null;
            }
            // if (v.content != null) {
            //   v.content = v.content.replace(re1, "");
            // }
          });
        }
      });
    },
    //弹出框方法,查看详情
    showModal(data) {
      this.detail = data;
      this.visible = true;
      let id = data.id;
      this.$api.look_Data(id).then((res) => {
        if (res.status == 200) {
          this.onSubmit();
        }
      });
      this.fileSearch = [];
      console.log(data);
      data.fileList.forEach((f) => {
        var obj = {
          name: f.substring(f.lastIndexOf("/") + 1),
          url: f,
        };
        this.fileSearch.push(obj);
      });
    },
    //查看详情附件下载
    down(item) {
      console.log(item);
      window.open(item.url);
    },

    aa(index) {
      this.isborder = index;
    },

    //上传按钮
    showModalA() {
      this.title = "上传资料";
      this.visibleA = true;

      // this.addForm.creatTime = new Date().toLocaleDateString()
    },
    //编辑按钮
    editData(data) {
      this.title = "编辑资料";
      this.visibleA = true;
      this.addForm = data;
      this.$nextTick(() => {
        this.autoTip();
      });
    },
    //
    //弹出框共享关闭方法
    handleOk() {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    //日期方法
    onChangeDate(date, dateString) {
      this.addForm.creatTime = moment(dateString).valueOf();
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
    },
    //新增修改数据
    confirmSend() {
      var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      this.addForm.content = this.addForm.content.replace(re1, ""); //执行替换成空字符
      console.log(this.addForm.content);
      let Time = JSON.parse(JSON.stringify(this.addForm.creatTime));
      this.newData.contentType = this.addForm.contentType;
      this.newData.content = this.addForm.content;
      this.newData.title = this.addForm.title;
      this.newData.informationType = this.addForm.informationType;
      this.newData.creatTime = new Date(Time).getTime();
      //判断
      if (this.title == "上传资料") {
        this.$api.informationAdd(this.newData).then((res) => {
          if (res.status == 200) {
            this.$message.info("上传成功");
            this.addForm = {
              creatTime: moment(),
              informationType: "1",
            };
            this.onSubmit();
          }
        });
        this.visibleA = false;
      } else {
        // console.log(this.addForm.creatTime);
        this.addForm.creatTime = moment(this.addForm.creatTime).valueOf();
        this.$api.edit_Data(this.addForm).then((res) => {
          if (res.status == 200) {
            this.$message.info("修改成功!");
            // this.addForm = {
            //   creatTime: "",
            //   informationType: "1",
            // };
            this.onSubmit();
          }
        });
        this.visibleA = false;
      }
    },

    //关闭弹窗
    handleCancel() {
      console.log("点击关闭按钮");
      this.addForm = {
        creatTime: moment(),
        informationType: "1",
      };

      this.visible = false;
      this.visibleA = false;
    },
    // 表格方法
    onSelectChange(selectedRowKeys) {
      console.log("已选择的表格: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //表格复选
    onChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
      this.delall = selectedRows;
    },
    onSelect() {},
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      pageSize;
      this.form.current = page;
      this.onSubmit();
    },
    //组件上传
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    upChange(info, e) {
      console.log(info, e);
      //获取富文本组件实例
      //let quill = this.$refs.myQuillEditor.quill;
      console.log(this.fileList);
      const { fileList } = this;
      console.log(fileList);
      const formData = new FormData();
      fileList.forEach((file, index) => {
        formData.append("multipartFileList[" + index + "]", file);
      });
      // this.$api.PostuploadFiles(formData).then((res) => {
      //   console.log(res);
      // });
    },
    //富文本上传图片
    handleUpload() {
      console.log(1111);

      //this.getdata(formData);
    },
    onEditorReady() {}, //富文本准备编辑器
    onEditorBlur() {}, //失去焦点事件
    onEditorFoucus(val, editor) {
      console.log(val); //富文本获得焦点时的内容
      editor.enable(false); //在获取焦点时禁用
    },
    onEditorChange() {}, //内容改变事件
    //富文本提示
    autoTip() {
      for (let item of this.toolbarTips) {
        let tip = document.querySelector(".quill-editor" + " " + item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
      }
    },
  },
  mounted() {
    this.onSubmit();
  },
  computed: {
    editor() {
      return this.$ref.myQuillEditor.quill;
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .ant-form-item-label{
  width: auto;
}
.all {
  display: flex;
  margin-top: 10px;
  overflow:auto;
  padding-bottom: 10px;
  &>p{
    font-size: 16px;
  }
}
.downFiles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 20%;
  flex-flow: row nowrap;
  border: 1px solid rgba(0,0,0,0.7);
  border-radius: 6px;
  box-sizing: border-box;
  margin-left: 10px;
}

.isborder {
  border: 1px solid #40a9ff;
}
::v-deep .anticon-arrow-down {
  padding-right: 10px;
}
.container {
  width: 83%;
  height: 400px;
  overflow: auto;
  margin-left: 80px;
  border: 1px solid #deefff;
}
.container::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}
//::v-deep .container > p > span {
//  color: rgba(255, 255, 255, 0.6) !important;
//  background-color: transparent !important;
//}
::v-deep .contentSpan > p > img {
  width: 50px;
  background-color: none;
}


.ant-input[disabled] {
  color: rgba(255, 255, 255, 0.6);
  background-color: #2c4945;
}

.editable-row-operations span {
  margin-right: 15px;
}
a-form-model-item {
  color: rgb(133, 128, 128);
}
.del-btn {
  background: #954a45;
  border: #954a45;
}
.del-btn:hover {
  color: rgba(0, 0, 0, 0.65);
}
.edit-btn {
  background: #207064;
  border: #207064;
}
.yty-history {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.yty-history .from-item__class {
  display: flex;
}
.sousuobtn {
  font-size: 14px;
  background-color: #207064;
  border-color: #207064;
  font-weight: 600;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
}
.content-bottom {
  margin-top: 10px;
  float: right;
}


.page-right {
  display: flex;
  position: absolute;
  left: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}

::v-deep.yty-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.tableclass{
  height: 86%;
}

.equipmentName {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  vertical-align: middle;
}

/* 分页 */

::v-deep .ant-upload.ant-upload-select {
  display: none;
}
p {
  margin: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

::v-deep .ql-container {
  height: 300px;
}
::v-deep .ql-toolbar.ql-snow {
  background-color: white;
}
</style>
